<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: #ffffff;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      overflow: hidden;
      transition: background 0.3s ease;
    }

    @media (prefers-color-scheme: dark) {
      body {
        background: #1a1a1a;
      }
    }

    .loader-container {
      text-align: center;
      position: relative;
      z-index: 10;
    }

    .logo {
      width: 120px;
      height: 120px;
      margin: 0 auto 30px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .logo-image {
      width: 80px;
      height: 80px;
    }

    h1 {
      color: #1a1a1a;
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 12px;
      letter-spacing: -0.5px;
    }

    @media (prefers-color-scheme: dark) {
      h1 {
        color: #ffffff;
      }
    }

    p {
      color: rgba(0, 0, 0, 0.65);
      font-size: 16px;
      font-weight: 400;
    }

    @media (prefers-color-scheme: dark) {
      p {
        color: rgba(255, 255, 255, 0.65);
      }
    }

    .dots {
      display: inline-block;
      animation: dots 1.5s steps(4, end) infinite;
    }

    @keyframes dots {

      0%,
      20% {
        content: '';
      }

      40% {
        content: '.';
      }

      60% {
        content: '..';
      }

      80%,
      100% {
        content: '...';
      }
    }

    .dots::after {
      content: '';
      animation: dots 1s steps(4, end) infinite;
    }
  </style>
  <script>
    const translations = {
      'en': {
        title: 'Starting',
        subtitle: 'Please wait a moment'
      },
      'zh': {
        title: '正在启动中',
        subtitle: '请稍候'
      },
      'zh-CN': {
        title: '正在启动中',
        subtitle: '请稍候'
      },
      'zh-TW': {
        title: '正在啟動中',
        subtitle: '請稍候'
      },
      'ja': {
        title: '起動中',
        subtitle: 'しばらくお待ちください'
      },
      'ko': {
        title: '시작 중',
        subtitle: '잠시만 기다려주세요'
      },
      'es': {
        title: 'Iniciando',
        subtitle: 'Por favor espere un momento'
      },
      'fr': {
        title: 'Démarrage',
        subtitle: 'Veuillez patienter un moment'
      },
      'de': {
        title: 'Wird gestartet',
        subtitle: 'Bitte warten Sie einen Moment'
      },
      'ru': {
        title: 'Запуск',
        subtitle: 'Пожалуйста, подождите'
      }
    };

    function getLanguage() {
      const lang = navigator.language || navigator.userLanguage;
      if (translations[lang]) {
        return lang;
      }
      const shortLang = lang.split('-')[0];
      return translations[shortLang] ? shortLang : 'en';
    }

    window.addEventListener('DOMContentLoaded', () => {
      const lang = getLanguage();
      const t = translations[lang];
      document.getElementById('title').textContent = t.title;
      document.getElementById('subtitle').textContent = t.subtitle;
    });
  </script>
</head>

<body>
  <div class="loader-container">
    <div class="logo">
      <img src="./icon.png" alt="Logo" class="logo-image" />
    </div>
    <h1 id="title">Starting</h1>
    <p><span id="subtitle">Please wait a moment</span><span class="dots"></span></p>
  </div>
</body>

</html>